<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Image Carousel</title>
  </head>
  <body>
    <div class="carousel">
      <div class="image-container" id="imgs">
        <!--图片 -->
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.d8c48c69c70634456df2fa1041826cc6?rik=c1%2floqaBV08XVQ&riu=http%3a%2f%2fa4.att.hudong.com%2f61%2f49%2f01300000310842122736493034701.jpg&ehk=XsBsiAeEa91hIFbA97%2ftgoC8j2X8NGrnASgf4oLwsnA%3d&risl=&pid=ImgRaw&r=0"
       alt="first-image"
       />
    <img
       src="https://pic.ntimg.cn/20140512/2531170_134405638000_2.jpg"
       alt="second-image"
       />
    <img
       src="https://ts1.cn.mm.bing.net/th/id/R-C.c6a9adcd6aa33a7c138622158526d12f?rik=cLIq6e1LSY0OCw&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f071215%2f11aD2352PU959.jpg&ehk=JujHQqwPT4UpvZ3peEQAaTSz%2fxaE%2beJGQk7Gwb2oe9k%3d&risl=&pid=ImgRaw&r=0"
       alt="third-image"
       />
    <img
       src="https://img.zcool.cn/community/0161c355acab9f6ac725817869f430.jpg@1280w_1l_2o_100sh.jpg"
       alt="fourth-image"
       />
      </div>
<!-- 按钮部分 -->
      <div class="buttons-container">
        <button id="left" class="btn">上一张</button>
        <button id="right" class="btn">下一张</button>
      </div>
    </div>

    <script src="scriot.js"></script>
  </body>
</html>